<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            height: 100vh;
            background-color: pink;
        }

        .box>img {
            position: absolute;
            z-index: 10;
            left: calc(50% - 25px);
            top: calc(100% - 62px);
        }
        .zidan {
            position: absolute;
            top: calc(100% - 62px);
            left: calc(50% - 25px);
            width: 10px;
            height: 40px;
            border-top: 1px solid #f00;
            box-shadow: 100%;
            background-image: linear-gradient( rgb(255, 198, 26),rgb(255, 47, 0), rgb(29, 25, 25), rgba(0, 0, 0, 0.955));
            border-top-left-radius: 100%;
            border-top-right-radius: 100%;
            transition: top 0s linear;
        }
        /* .zidan{
            position: absolute;
            top: calc(100% - 62px);
            left: calc(50% - 25px);
            width: 10px;
            height: 40px;
            border-top: 1px solid #f00;
            background-image: linear-gradient(rgb(255, 47, 0),rgb(255, 221, 0),rgba(255, 0, 0, 0),rgba(255, 0, 0, 0));
            border-top-left-radius: 100%;
            border-top-right-radius: 100%;
            transition: top 0s linear;
        } */
    </style>
</head>

<body>
    <div class="box">
        <img src="../bd.png" alt="飞机">
    </div>
    <script>
        var img = document.querySelector("img");
        var box = document.querySelector(".box");
        // 1.按上下左右键实现img的移动
        // 1.1加键盘事件
        window.addEventListener("keydown", function (e) {
            var {x,y} = img.getBoundingClientRect();
                switch (e.keyCode) {
                    case 37:
                        x -= 10;   //  左 ←
                        break;
                    case 38:
                        y -= 10;   //  上 ↑
                        break;
                    case 39:
                        x += 10;    //  右 →
                        break;
                    case 40:
                         y += 10;  //  下 ↓ 
                        break;
                    default:
                        break;  
                }
                x = x < 0 ? 0 : x;
                y = y < 0 ? 0 : y;
     // ？ 鼠标距离浏览器窗口的偏移量 - 标签距离浏览器窗口的偏移量 == 鼠标到标签的偏移量
                x = x > window.innerWidth - img.offsetWidth ? window.innerWidth - img.offsetWidth : x;
                y = y > window.innerHeight - img.offsetHeight ? window.innerHeight - img.offsetHeight : y;
                img.style.left = x + "px";
                img.style.top = y + "px";
        })
        //加子弹键盘事件
        window.addEventListener("keydown", function (e) {
            // 当按下空格
            if(e.keyCode == 32){
                // 创建一个span标签
                var span = document.createElement("span");
                // 给这个span添加上这个class 会带有相关样式 
                span.classList.add("zidan");
                // 获取小飞机的位置
                var {x,y} = img.getBoundingClientRect();
                // 计算让x的值等于小飞机中间 x - 小飞机宽的一半 + span宽的一半 
                x += 20;
                // 设置span的初位置
                span.style.top = y + "px";
                span.style.left = x + "px";
                // 将标签添加至页面
                box.appendChild(span);
                setTimeout(function(){
                    // 标签创建后设置span的过渡时间
                    span.style.transitionDuration = "0.5s";
                    // 设置span位置移动 带有动画效果
                    span.style.top = "-40px";
                    // 等过渡动画执行完毕后删除这个标签
                    setTimeout(function(){
                        box.removeChild(span);
                    },1000)
                },0)
            }
        })
    </script>
</body>

</html>